<template>
    <div>
        <!-- 个人中心 -->
        <van-nav-bar title="个人信息" style="background-color: #f9f9f9;" left-arrow>
            <template #right>
                <span class="template_span" @click="baoChun">保存</span>
            </template>
            <template #left>
                <van-icon @click="onClickLeft" name="arrow-left" size="18" />
            </template>
        </van-nav-bar>
        <!-- 修改头像部分 -->
        <div @click="show = true">
            <van-empty class="custom-image" image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
                description="点击修改头像" />
        </div>
        <van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
        <!-- 手机号 -->
        <div>
            <van-cell-group>
                <van-field label="手机号" value="188****8888" readonly right-icon="closed-eye"/>
              </van-cell-group>
            <!-- 选择地区 -->
            <van-field readonly clickable name="area" :value="value" label="地区选择" placeholder="点击选择城市"
                @click="showArea = true" />
            <van-popup v-model="showArea" position="bottom">
                <van-area :area-list="areaList" @confirm="onConfirm" @cancel="showArea = false" />
                <!-- <van-area title="选择城市" :area-list="areaList" /> -->
            </van-popup>
        </div>
        <!-- 账号性质 -->
        <div>
            <van-cell-group>
                <van-field v-model="zhangHao" label="账号性质" placeholder="个人" />
            </van-cell-group>
        </div>
    </div>
</template>
<script>
    import { Toast, Area, Form, Icon, Field, NavBar, Empty, ActionSheet, Cascader } from 'vant';


    export default {
        data() {
            return {
                show: false,
                actions: [{ name: '立即拍照' }, { name: '从相册选择' }, { name: '取消' }],
                zhangHao: "",
                value: '',
                showArea: false,
                areaList: {
                    province_list: {
                        110000: '北京市',
                        120000: '天津市',
                        130000: '武汉市',
                        140000: '南阳市',
                        150000: '上海市',
                        160000: '广州市',
                        170000: '珠海市',
                    },
                    // city_list: {
                    //     110100: '北京市',
                    //     120100: '天津市',
                    // },
                    county_list: {
                        110101: '东城区',
                        110102: '西城区',
                        110103: '朝阳区',
                        110104: '顺义区',
                        110105: '管城区',
                    },
                },
            }
        },
        components: {},
        computed: {},
        methods: {
            // 弹出框
            onSelect(item) {
                // 默认情况下点击选项时不会自动收起
                // 可以通过 close-on-click-action 属性开启自动收起
                this.show = false;
                // Toast(item.name);
            },
            // 返回个人中心
            onClickLeft() {
                this.$router.go(-1)
            },
            // 选择城市
            onConfirm(values) {
                this.value = values
                    .filter((item) => !!item)
                    .map((item) => item.name)
                    .join('/');
                this.showArea = false;
            },
            // 保存
            baoChun() {
                this.$router.push("/zhongXin")
                Toast({
                    message: '保存成功',
                    icon: 'passed',
                });
            },

        },
    }
</script>

<style lang="less" scoped>
    .van-nav-bar .van-icon {
        color: #52bc9b;
    }

    .template_span {
        color: #52bc9b;
    }

    .van-icon:before {
        margin-top: 5px;
    }

    .van-cell_span {
        margin-right: 100px;
    }
</style>